<template>
  <div id="dashboard"  v-loading="messageFlg || xbarFlg || rchartFlg || normalFlg"  element-loading-text="数据加载中...">
    <!-- 标题 -->
    <div class="dashboard-header">
      <h1 class="title">Data Dashboard</h1>
      <el-button
        type="primary"
        class="fullscreen-button"
        @click="toggleFullScreen"
      >
        <i class="el-icon-full-screen"></i>
      </el-button>
    </div>

    <!-- 内容区域 -->
    <div class="dashboard-content">
      <div class="dashboard-grid">
        <div class="dashboard-item" v-for="(item, index) in 4" :key="index">
          <message :tempId="tempId" v-if="index === 0" @messageEvent="messageEvent"/>
          <xbar    :tempId="tempId" v-else-if="index === 1"  @xbarEvent="xbarEvent"/>
          <normal  :tempId="tempId" v-else-if="index === 2"  @normalEvent="normalEvent"/>
          <rchart  :tempId="tempId" v-else-if="index === 3"  @rchartEvent="rchartEvent"/>
          <span v-else>未知</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import message from './temp/message.vue';
import xbar from './temp/xbar.vue';
import rchart from './temp/rchart.vue';
import normal from './temp/NormalDistributionChart.vue';

export default {
  components: {
    message,
    xbar,
    rchart,
    normal,
  },
  name: "Dashboard",
  data() {
    return {
      tempId: null,
      messageFlg:true,
      xbarFlg:true,
      rchartFlg:true,
      normalFlg:true,
    };
  },
  created() {
    this.getTempIdFromUrl();
  },
  methods: {
    getTempIdFromUrl() {
      this.tempId = this.$route.query.tempId;
      console.log('tempId:', this.tempId);
    },
    toggleFullScreen() {
      const elem = document.getElementById('dashboard');
      if (!document.fullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { // Firefox
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { // IE/Edge
          elem.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
          document.msExitFullscreen();
        }
      }
    },
    messageEvent(flg){
      this.messageFlg= flg;
    },
    xbarEvent(flg){
      this.xbarFlg= flg;
    },
    rchartEvent(flg){
      this.rchartFlg= flg;
    },
    normalEvent(flg){
      this.normalFlg= flg;
    }
  },
};
</script>

<style scoped>
#dashboard {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f3f4f6; /* 设置背景颜色 */
  overflow: auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #66b1ff;
}

.title {
  font-size: 2rem;
  margin: 0;
  color: white;
}

.fullscreen-button {
  font-size: 1rem;
}

.dashboard-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 96%;
  height: 96%;
}

.dashboard-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.0rem;
  //color: #fff;
  //background: linear-gradient(135deg, #42b983, #2c3e50);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
